/** IT网络流量部件 
 * Author:      yangjq 
 * CreateTime:  2023/8/12 23:20:48 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:34:26 
 * Description: 
*/ 
<template>
  <div ref="echartRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect,onMounted,watch} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

const props = defineProps(['width' , 'height']);

const echartRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts,getInstance: chartInstance} = useECharts(echartRef as Ref<HTMLDivElement>,'dark');

  // prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

const data2 = [["2000-06-05", 126], ["2000-06-06", 123], ["2000-06-07", 145], ["2000-06-08", 286], ["2000-06-09", 173], ["2000-06-10", 535], ["2000-06-11", 273], ["2000-06-12", 268], ["2000-06-13", 192], ["2000-06-14", 230], ["2000-06-15", 245], ["2000-06-16", 239], ["2000-06-17", 315], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 237], ["2000-06-22", 118], ["2000-06-23", 185], ["2000-06-24", 194], ["2000-06-25", 171], ["2000-06-26", 126], ["2000-06-27", 184], ["2000-06-28", 193], ["2000-06-29", 185], ["2000-06-30", 173], ["2000-07-01", 183], ["2000-07-02", 135], ["2000-07-03", 117], ["2000-07-04", 182], ["2000-07-05", 144], ["2000-07-06", 172], ["2000-07-07", 126], ["2000-07-08", 67], ["2000-07-09", 166], ["2000-07-10", 191], ["2000-07-11", 192], ["2000-07-12", 123], ["2000-07-13", 37], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 164], ["2000-07-17", 169], ["2000-07-18", 188], ["2000-07-19", 717], ["2000-07-20", 183], ["2000-07-21", 221], ["2000-07-22", 127], ["2000-07-23", 155], ["2000-07-24", 160]];
const dateList = data.map(function (item) {
  return item[0];
});
const dateList2 = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
const valueList2 = data2.map(function (item) {
  return item[1];
});

const warningValueList = data2.map(function (item) {
  return Math.floor((Math.random()*20));
});

//温度--数据机房
const valueList3 = data2.map(function (item) {
  return (Math.random()*100).toFixed(2);
});

//温度--网络机房
const valueList4 = data2.map(function (item) {
  return (Math.random()*100).toFixed(2);
});


//湿度--数据机房
const valueList5 = data2.map(function (item) {
  return Math.round(Math.random()*100);
});

//湿度--网络机房
const valueList6 = data2.map(function (item) {
  return Math.round(Math.random()*100);
});
const option = reactive({});
function initCharts() {
  Object.assign(option,reactive({
    // Make gradient line here
    visualMap: [
      {
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 1000,
        // 表示 目标系列 的视觉样式。
        target: {
            inRange: {
                color: ['#5470c6', 'red'],
                symbolSize: [20, 40]
            }
        },
        // 表示 visualMap-continuous 本身的视觉样式。
        controller: {
            inRange: {
                symbolSize: [20, 40]
            }
        }
      },
      {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        min: 0,
        max: 1000,
        // 表示 目标系列 的视觉样式。
        target: {
            inRange: {
                color: ['#fac858', 'red'],
                symbolSize: [20, 40]
            }
        },
        // 表示 visualMap-continuous 本身的视觉样式。
        controller: {
            inRange: {
                symbolSize: [20, 40]
            }
        }
      },    
      {
        show: false,
        type: 'continuous',
        seriesIndex: 2,
        min: 0,
        max: 40,
        // 表示 目标系列 的视觉样式。
        target: {
            inRange: {
                color: ['#9a60b4', 'red'],
                symbolSize: [20, 40]
            }
        },
        // 表示 visualMap-continuous 本身的视觉样式。
        controller: {
            inRange: {
                symbolSize: [20, 40]
            }
        }
      },
    ],
    title: [
      {
        left: 'center',
        top: '18px',
        text: '网络流量'
      },
      {
        top: '55%',
        left: 'center',
        text: '告警统计'
      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 10;
    },
    xAxis: [
      {
        data: dateList,
        gridIndex: 0
      },
      {
        data: dateList,
        gridIndex: 1
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:'流速(Gbps)',
        nameLocation:'center',
        nameGap: 30,
        nameRotate: 90,
        splitLine:{show: false},
        splitArea: {
          show: true,
          areaStyle: {
            color:['rgba(250,250,250,0)','rgba(200,200,200,0.1)'],
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }
        },
        gridIndex: 0  
      },
      {
        type: 'value',
        name:'数量',
        nameLocation:'center',
        nameGap: 30,
        nameRotate: 90,
        splitLine:{show: false},
        splitArea: {
          show: true,
          areaStyle: {
            color:['rgba(250,250,250,0)','rgba(200,200,200,0.1)'],
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }
        },
        gridIndex: 1  
      }      
    ],
    grid: [
      {
        top: '10%',
        bottom: '60%',
        containLabel:true,
        left:'center',
        width:"86%",
      },
      {
        top: '60%',
        containLabel:true,
        left:'center',
        width:"86%",
        bottom: '20px',
      }
    ],
    legend: {
      show:true,
      type:'plain',
      top:'42%',
      data: ['上行', '下行']
    },
    series: [
      {
        type: 'line',
        name: '上行',
        showSymbol: false,
        data: valueList,
        color:'#5470c6'
      },
      {
        type: 'line',
        name: '下行',
        showSymbol: false,
        data: valueList2,
        color:'#fac858'
      },
      {
        type: 'line',
        name: '告警',
        showSymbol: false,
        data: warningValueList,
        xAxisIndex: 1,
        yAxisIndex: 1,
        color:'#9a60b4'
      },
    ]
  }));
  setOptions(option);
}
watchEffect(() => {
  initCharts();
});
onMounted(() => {

});

</script>
<style>
</style>
